<template>
  <view :class="theme">
    <view class="m-30 overflow-hidden text-28">
      <block v-for="(option, key) in formData" :key="key">
        <view v-if="option.title" class="mb-60">
          <label class="mb-20 text-28 pl-6">{{ option?.title }}</label>
          <label class="flex-row items-center flex-1 bg-section pr-20 b-rounded-16 overflow-hidden">
            <input @input="(e: any) => formData[key].value = e.detail.value" :readonly="!!option.type"
              :value="option.showValue || option.value" class="flex-1 h-88 b-rounded-16 pl-20 pr-20 text-28"
              :type="option.inputType || 'text'" :maxlength="option.maxlength" :placeholder="option.placeholder" />
            <uv-icon v-if="option.type === 'select'" size="32" color="#aaa" name="arrow-right" />
          </label>
        </view>
      </block>
    </view>

    <button @click="bindCard" hover-class="op-[0.6]" style="margin: 120rpx 30rpx; line-height: 88rpx"
      class="bg-primary b-rounded-16 color-base fw-700 text-center text-36">
      确认
    </button>

    <uv-popup :ref="(e: any) => (showPopup.captcha = e)" mode="center" closeable :close-on-click-overlay="false"
      close-icon-color="#fff">
      <view class="b-rounded-20 bg-section p-30" style="width: 600rpx">
        <label class="text-36 fw-700">验证手机号</label>
        <text class="mt-30">发送短信验证码至手机</text>
        <view class="mt-30 flex-row items-center bg-4 b-rounded-20">
          <input v-model="formData.captcha.value" class="flex-1 pl-30 pr-30 h-88" placeholder="请输入验证码" type="number"
            maxlength="6" placeholder-class="color-placeholder" />
        </view>
        <button @click="submit" hover-class="op-[0.6]" style="line-height: 88rpx"
          class="flex-row bg-primary b-rounded-16 justify-center items-center m-30">
          <text class="ml-8 text-32 color-base fw-600">确认</text>
        </button>
      </view>
    </uv-popup>
  </view>
</template>
<script lang="ts" setup>
import { useMapState } from "@/common/libs/store";
import { ref, reactive } from "vue";
import { debounce, uniNavigator } from "@/common/libs/utils";
const { theme } = useMapState(["theme"]);
const apply_id = ref("");
const formData = reactive<AnyObject>({
  bankNumber: {
    title: "银行卡号",
    placeholder: "请填写银行卡号",
    value: "",
    errorMessage: "请输入银行卡号",
    inputType: "number",
    maxlength: 32,
    rule: /^.+$/,
  },
  phoneNumber: {
    title: "手机号码",
    placeholder: "请填写手机号码",
    value: "",
    errorMessage: "手机号码输入有误",
    inputType: "number",
    maxlength: 11,
    rule: /^1[0-9]{10}$/,
  },
});
const captcha = reactive<AnyObject>({
  text: "验证码",
  errorMessage: "验证码输入有误",
  disabled: false,
  count: 60,
  timer: null as any,
  value: "",
  field: "code",
  rule: /^[0-9]{4,6}$/,
});
const bindCardParams: AnyObject = {};

const showPopup = reactive({
  captcha: {} as AnyObject,
});

const changePopup = (e: boolean, popupKey: keyof typeof showPopup) => {
  showPopup[popupKey][e ? "open" : "close"]();
};

const bindCard = debounce(() => {
  const verification = (<Array<keyof typeof formData>>Object.keys(formData)).every(
    (key) => {
      const { value, field, errorMessage: title, rule } = formData[key] as any;

      if (title && !rule.test(String(value))) {
        uni.showToast({ title, icon: "none" });
        return false;
      }

      field && (bindCardParams[field] = value);
      return true;
    }
  );
  if (!verification) return;

  uni.showToast({ icon: "loading", mask: true });
  uni.request({
    url: "/bindBank",
    data: {
      card_id: formData.bankNumber.value,
      mobile: formData.phoneNumber.value,
    },
    success: ({ data }: any) => {
      changePopup(true, 'captcha');
      apply_id.value = data.apply_id;
      uni.hideToast();
    },
  });
}, 1500);

const submit = () => {
  if (!captcha.rule.test(captcha.value)) {
    return uni.showToast({ title: "验证码输入有误", icon: "none" });
  }
  uni.request({
    url: "/confirmBind",
    data: {
      sms_code: captcha.value,
      apply_id: apply_id.value,
    },
    success: ({ data }: any) => {
      uniNavigator({ type: 'reLaunch', url: "/pages/client/main/cards" });
    },
  });
};


</script>
